<script setup lang="ts">
import {GET_API, ref} from "#imports";

interface Category {
    name: string;
    level: number;
    icon?: string;
    color?: string;
    children: Category[];
    expanded?: boolean; // 用于跟踪节点是否展开
}

const selectedSubCategories = ref<Category[]>([])
const selectedSubSubCategories = ref<Category[]>([])

const {data: categories} = await GET_API('/category/views')
//
const handleCategoryClick = (val: Category, level: number) => {
    if (level === 2) {
        selectedSubCategories.value = val.children || []
        selectedSubSubCategories.value = []
    } else if (level === 3) {
        selectedSubSubCategories.value = val.children || []
    }
    if(selectedSubCategories.value.length === 0){
    }

}

const reset = () => {
    selectedSubCategories.value = []
    selectedSubSubCategories.value = []
}
</script>

<template>
    <v-tabs
        :items="categories"
        @update:model-value="reset"
        align-tabs="center"
        color="white"
        height="60"
        slider-color="#f78166"
    >
        <template v-slot:tab="{ item }">
            <v-tab
                :color="item.color"
                :prepend-icon="item.icon"
                :text="item.name"
                :value="item.name"
                class="text-none"
            ></v-tab>
        </template>

        <template v-slot:item="{ item }">
            <v-tabs-window-item :value="item.name" class="pa-4">
                <v-chip-group>
                    <v-chip
                        @click="handleCategoryClick(child, 2)"
                        v-for="(child, index) in item.children"
                        :key="index"
                        class="ma-2"
                        :color="item.color"
                        text-color="white"
                        :ripple="false"
                    >
                        {{ child.name }}
                    </v-chip>
                </v-chip-group>
                <v-chip-group v-if="selectedSubCategories.length">
                    <v-chip
                        @click="handleCategoryClick(child, 3)"
                        v-for="(child, index) in selectedSubCategories"
                        :key="index"
                        class="ma-2"
                        :color="item.color"
                        text-color="white"
                        :ripple="false"
                    >
                        {{ child.name }}
                    </v-chip>
                </v-chip-group>
                <v-chip-group v-if="selectedSubSubCategories.length">
                    <v-chip
                        v-for="(child, index) in selectedSubSubCategories"
                        :key="index"
                        class="ma-2"
                        :color="item.color"
                        text-color="white"
                        :ripple="false"
                    >
                        {{ child.name }}
                    </v-chip>
                </v-chip-group>
            </v-tabs-window-item>
        </template>
    </v-tabs>
</template>

<style scoped>

</style>